<template>
	<view class="zxc_centent">
		<view class="olp">
			<view class="ilf">
				<view class="ilf_left">旧手机号</view>
				<input class="ilf_right" type="text" placeholder="请输入您的旧手机号" v-model="oldPhonenum" placeholder-style="font-size:26upx"/>
			</view>
			<view class="ilf">
				<view class="ilf_left">新手机号</view>
				<input class="ilf_right" type="text" placeholder="请输入您的新手机号" v-model="newPhonenum" placeholder-style="font-size:26upx"/>
			</view>
			<view class="ilf">
				<view class="ilf_left">短信验证</view>
				<view class="olf">
				<input class="ilf_right" type="text" placeholder="请输入验证码" placeholder-style="font-size:26upx" v-model="verify"/>
				<view class="tel_btn" @click="verifyBtn()" v-if="verifyShow">获取验证码</view>
				<view class="tel_btn"  v-else>{{verifyTip+'秒'}}</view>
				</view>
			</view>
		</view>
		<view class="jv" @tap="confirm">确认</view>
	</view>
</template>

<script>
	export default{
		data (){
			return {
				verify:'', //输入的验证码
				verifyShow:true,
				verifyTip:60,
				oldPhonenum: '', //旧手机号
				newPhonenum: '', //新手机号
				phonenum: '',
				verificationCode:'', //后台返回的验证码
			}
		},
		onLoad(options) {
			console.log(options.phonenum)
			this.phonenum = options.phonenum
		},
		methods:{
			verifyBtn (){
				// if(this.phonenum == this.oldPhonenum) {
					this.getVerificationCode()
					
				// }else {
				// 	uni.$showMsg('输入手机号错误，请重新输入')
				// }
			},
			timedown (num){
				let that = this;
				if(num == 0){
					that.verifyShow = true;				// 是否显示获取验证码
					return clearTimeout();
				}else{
					that.verifyShow = false;			// 是否显示获取验证码
					setTimeout(function() {  
						that.verifyTip = num-1
						that.timedown(num-1);  
					}, 1000);//定时每秒减一  
				}
			},
			// 确认修改按钮
			confirm() {
				if(this.oldPhonenum == '') {
					uni.$showMsg('请输入旧手机号')
				}else if(this.newPhonenum == '') {
					uni.$showMsg('请输入新手机号')
				} else if(this.verify == '') {
					uni.$showMsg('请输入验证码')
				}else if(this.verify != this.verificationCode) {
					uni.$showMsg('验证码错误，请重新输入')
				}else {
					this.$post(this.$api.modifyPhone, {phonenumber: this.newPhonenum},
					res => {
						if(res.code == 200) {
							uni.$showMsg('修改成功')
							setTimeout(function(){
								uni.navigateBack()
							},1500)
						}
						// console.log(res)
					},
					res => {
						uni.$showMsg( res.msg ? res.msg : '网络错误')
					},1,0)
				}
			},
			// 请求后端接口获取验证码
			getVerificationCode() {
				var obj = {
					phonenumber: this.newPhonenum
				}
				this.$post(this.$api.getVerificationCode,obj,
				res => {
		
					if(res.code ==200){
						this.verificationCode = res.data
						console.log('验证码===》', res)
						this.timedown(this.verifyTip) 
					}else{
						uni.$showMsg(res.msg)
					}
				},
				res => {
					console.log('res11',res)
				},1,0)
			},
		}
	}
</script>

<style>
	.olp{
		padding:0 30upx 0;
		background-color: #fff;
	}
	.olu{
		font-weight: 700;
		text-align: center;
	}
	.if{
		text-align: center;
		margin-top:10upx;
		font-size: 25upx;
		margin-bottom:30upx;
	}
	.ilf{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30upx 0;
		width:100%;
		margin:0 auto;
		border-bottom:1px solid #ededed;
		font-size: 26upx;
	}
	.ilf input{
		width:70%;
		font-size: 26upx;
	}
	.ilf_right{
		width: 70%;
	}
	.jv{
		background-color: #07c160;
		color:#fff;
		text-align: center;
		padding:20upx 0;
		border-radius: 100upx;
		width:92%;
		margin:200upx auto;
	}
	.olf{
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tel_btn{
		white-space: nowrap;
		color:#07c160;
	}
</style>